@import "flexbox";

/*
 *  0. 栅格开发三部曲
 *  1. 解决全屏栅格
 *  2. 解决嵌套栅格
 *  3. 解决偏移栅格
 */

.row-str {
  .flex;
  .flex-align-content(stretch);
  .flex-align-items(stretch);
  .flex-justify-content(space-between);
}

.row {
  .flex;
  .flex-align-items(stretch);
  .flex-justify-content(space-between);
}

.row-col {
  .flex;
  .flex-direction(column);
  .flex-align-content(stretch);
  .flex-align-items(stretch);
  .flex-justify-content(space-bettween);
}

.row, .row-column, [class*='col-'], .wrap-col {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.no-flexbox [class*='col-'] {
  padding: 5px;
}

.flexbox .wrap-col {
  margin: 5px;
}

.col-per(@per) {
  .flex-n(@per);
}

[class*='col-1-'] {
  .col-per(1);
}

[class*='col-2-'] {
  .col-per(2);
}

[class*='col-3-'] {
  .col-per(3);
}

[class*='col-4-'] {
  .col-per(4);
}

[class*='col-5-'] {
  .col-per(5);
}

[class*='col-6-'] {
  .col-per(6);
}

[class*='col-7-'] {
  .col-per(7);
}

[class*='col-8-'] {
  .col-per(8);
}

[class*='col-9-'] {
  .col-per(9);
}

[class*='col-10-'] {
  .col-per(10);
}

[class*='col-11-'] {
  .col-per(11);
}

/* 1/2 */
[class*='col-'][class*='Los-1-2'],
[class*='col-'][class*='Los-2-4'],
[class*='col-'][class*='Los-3-6'],
[class*='col-'][class*='Los-4-8'],
[class*='col-'][class*='Los-8-12'] {
  margin-left: 50%;
}

[class*='col-'][class*='Ros-1-2'],
[class*='col-'][class*='Ros-2-4'],
[class*='col-'][class*='Ros-3-6'],
[class*='col-'][class*='Ros-4-8'],
[class*='col-'][class*='Ros-8-12'] {
  margin-right: 50%;
}

.no-flexbox [class*='col-1-2'],
.no-flexbox [class*='col-2-4'],
.no-flexbox [class*='col-3-6'],
.no-flexbox [class*='col-4-8'],
.no-flexbox [class*='col-8-12'] {
  width: 50%;
}

/* 1/3 */
[class*='col-'][class*='Los-1-3'],
[class*='col-'][class*='Los-2-6'],
[class*='col-'][class*='Los-3-9'],
[class*='col-'][class*='Los-4-12'] {
  margin-left: 33.333333333%;
}

[class*='col-'][class*='Ros-1-3'],
[class*='col-'][class*='Ros-2-6'],
[class*='col-'][class*='Ros-3-9'],
[class*='col-'][class*='Ros-4-12'] {
  margin-right: 33.333333333%;
}

.no-flexbox [class*='col-1-3'],
.no-flexbox [class*='col-2-6'],
.no-flexbox [class*='col-3-9'],
.no-flexbox [class*='col-4-12'] {
  width: 33.333333333%;
}

/* 2/3 */
[class*='col-'][class*='Los-2-3'],
[class*='col-'][class*='Los-4-6'],
[class*='col-'][class*='Los-6-9'],
[class*='col-'][class*='Los-8-12'] {
  margin-left: 66.666666666%;
}

[class*='col-'][class*='Ros-2-3'],
[class*='col-'][class*='Ros-4-6'],
[class*='col-'][class*='Ros-6-9'],
[class*='col-'][class*='Ros-8-12'] {
  margin-right: 66.666666666%;
}

.no-flexbox [class*='col-2-3'],
.no-flexbox [class*='col-4-6'],
.no-flexbox [class*='col-6-9'],
.no-flexbox [class*='col-8-12'] {
  width: 66.666666666%;
}

/* 1/4 */
[class*='col-'][class*='Los-1-4'],
[class*='col-'][class*='Los-2-8'],
[class*='col-'][class*='Los-3-12'] {
  margin-left: 25%;
}

[class*='col-'][class*='Ros-1-4'],
[class*='col-'][class*='Ros-2-8'],
[class*='col-'][class*='Ros-3-12'] {
  margin-right: 25%;
}

.no-flexbox [class*='col-1-4'],
.no-flexbox [class*='col-2-8'],
.no-flexbox [class*='col-3-12'] {
  width: 25%;
}

/* 3/4 */
[class*='col-'][class*='Los-3-4'],
[class*='col-'][class*='Los-6-8'],
[class*='col-'][class*='Los-9-12'] {
  margin-left: 75%;
}

[class*='col-'][class*='Ros-3-4'],
[class*='col-'][class*='Ros-6-8'],
[class*='col-'][class*='Ros-9-12'] {
  margin-right: 75%;
}

.no-flexbox [class*='col-3-4'],
.no-flexbox [class*='col-6-8'],
.no-flexbox [class*='col-9-12'] {
  width: 75%;
}

/* 1/5 */
[class*='col-'][class*='Los-1-5'],
[class*='col-'][class*='Los-2-10'] {
  margin-left: 20%;
}

[class*='col-'][class*='Ros-1-5'],
[class*='col-'][class*='Ros-2-10'] {
  margin-right: 20%;
}

.no-flexbox [class*='col-1-5'],
.no-flexbox [class*='col-2-10'] {
  width: 20%;
}

/* 2/5 */
[class*='col-'][class*='Los-2-5'],
[class*='col-'][class*='Los-4-10'] {
  margin-left: 40%;
}

[class*='col-'][class*='Ros-2-5'],
[class*='col-'][class*='Ros-4-10'] {
  margin-right: 40%;
}

.no-flexbox [class*='col-2-5'],
.no-flexbox [class*='col-4-10'] {
  width: 40%;
}

/* 3/5 */
[class*='col-'][class*='Los-3-5'],
[class*='col-'][class*='Los-6-10'] {
  margin-left: 60%;
}

[class*='col-'][class*='Ros-3-5'],
[class*='col-'][class*='Ros-6-10'] {
  margin-right: 60%;
}

.no-flexbox [class*='col-3-5'],
.no-flexbox [class*='col-6-10'] {
  width: 60%;
}

/* 4/5 */
[class*='col-'][class*='Los-4-5'],
[class*='col-'][class*='Los-8-10'] {
  margin-left: 80%;
}

[class*='col-'][class*='Ros-4-5'],
[class*='col-'][class*='Ros-8-10'] {
  margin-right: 80%;
}

.no-flexbox [class*='col-4-5'],
.no-flexbox [class*='col-8-10'] {
  width: 80%;
}

/* 1/6 */
[class*='col-'][class*='Los-1-6'],
[class*='col-'][class*='Los-2-12'] {
  margin-left: 16.666666666%;
}

[class*='col-'][class*='Ros-1-6'],
[class*='col-'][class*='Ros-2-12'] {
  margin-right: 16.666666666%;
}

.no-flexbox [class*='col-1-6'],
.no-flexbox [class*='col-2-12'] {
  width: 16.666666666%;
}

/* 5/6 */
[class*='col-'][class*='Los-5-6'],
[class*='col-'][class*='Los-10-12'] {
  margin-left: 83.333333333%;
}

[class*='col-'][class*='Ros-5-6'],
[class*='col-'][class*='Ros-10-12'] {
  margin-right: 83.333333333%;
}

.no-flexbox [class*='col-5-6'],
.no-flexbox [class*='col-10-12'] {
  width: 83.333333333%;
}

/* 1/7 */
[class*='col-'][class*='Los-1-7'] {
  margin-left: 14.285714285%;
}

[class*='col-'][class*='Ros-1-7'] {
  margin-right: 14.285714285%;
}

.no-flexbox [class*='col-1-7'] {
  width: 14.285714285%;
}

/* 2/7 */
[class*='col-'][class*='Los-2-7'] {
  margin-left: 28.571429%;
}

[class*='col-'][class*='Ros-2-7'] {
  margin-right: 28.571429%;
}

.no-flexbox [class*='col-2-7'] {
  width: 28.571429%;
}

/* 3/7 */
[class*='col-'][class*='Los-3-7'] {
  margin-left: 42.857143%;
}

[class*='col-'][class*='Ros-3-7'] {
  margin-right: 42.857143%;
}

.no-flexbox [class*='col-3-7'] {
  width: 42.857143%;
}

/* 4/7 */
[class*='col-'][class*='Los-4-7'] {
  margin-left: 57.142857%;
}

[class*='col-'][class*='Ros-4-7'] {
  margin-right: 57.142857%;
}

.no-flexbox [class*='col-4-7'] {
  width: 57.142857%;
}

/* 5/7 */
[class*='col-'][class*='Los-5-7'] {
  margin-left: 71.428571%;
}

[class*='col-'][class*='Ros-5-7'] {
  margin-right: 71.428571%;
}

.no-flexbox [class*='col-5-7'] {
  width: 71.428571%;
}

/* 6/7 */
[class*='col-'][class*='Los-6-7'] {
  margin-left: 85.714286%;
}

[class*='col-'][class*='Ros-6-7'] {
  margin-right: 85.714286%;
}

.no-flexbox [class*='col-6-7'] {
  width: 85.714286%;
}

/* 1/8 */
[class*='col-'][class*='Los-1-8'] {
  margin-left: 12.5%;
}

[class*='col-'][class*='Ros-1-8'] {
  margin-right: 12.5%;
}

.no-flexbox [class*='col-1-8'] {
  width: 12.5%;
}

/* 3/8 */
[class*='col-'][class*='Los-3-8'] {
  margin-left: 37.5%;
}

[class*='col-'][class*='Ros-3-8'] {
  margin-right: 37.5%;
}

.no-flexbox [class*='col-3-8'] {
  width: 37.5%;
}

/* 5/8 */
[class*='col-'][class*='Los-5-8'] {
  margin-left: 62.5%;
}

[class*='col-'][class*='Ros-5-8'] {
  margin-right: 62.5%;
}

.no-flexbox [class*='col-5-8'] {
  width: 62.5%;
}

/* 7/8 */
[class*='col-'][class*='Los-7-8'] {
  margin-left: 87.5%;
}

[class*='col-'][class*='Ros-7-8'] {
  margin-right: 87.5%;
}

.no-flexbox [class*='col-7-8'] {
  width: 87.5%;
}

/* 1/9 */
[class*='col-'][class*='Los-1-9'] {
  margin-left: 11.111111%;
}

[class*='col-'][class*='Ros-1-9'] {
  margin-right: 11.111111%;
}

.no-flexbox [class*='col-1-9'] {
  width: 11.111111%;
}

/* 2/9 */
[class*='col-'][class*='Los-2-9'] {
  margin-left: 22.222222%;
}

[class*='col-'][class*='Ros-2-9'] {
  margin-right: 22.222222%;
}

.no-flexbox [class*='col-2-9'] {
  width: 22.222222%;
}

/* 4/9 */
[class*='col-'][class*='Los-4-9'] {
  margin-left: 44.444444%;
}

[class*='col-'][class*='Ros-4-9'] {
  margin-right: 44.444444%;
}

.no-flexbox [class*='col-4-9'] {
  width: 44.444444%;
}

/* 5/9 */
[class*='col-'][class*='Los-5-9'] {
  margin-left: 55.555555%;
}

[class*='col-'][class*='Ros-5-9'] {
  margin-right: 55.555555%;
}

.no-flexbox [class*='col-5-9'] {
  width: 55.555555%;
}

/* 7/9 */
[class*='col-'][class*='Los-7-9'] {
  margin-left: 77.777777%;
}

[class*='col-'][class*='Ros-7-9'] {
  margin-right: 77.777777%;
}

.no-flexbox [class*='col-7-9'] {
  width: 77.777777%;
}

/* 8/9 */
[class*='col-'][class*='Los-8-9'] {
  margin-left: 88.888888%;
}

[class*='col-'][class*='Ros-8-9'] {
  margin-right: 88.888888%;
}

.no-flexbox [class*='col-8-9'] {
  width: 88.888888%;
}

/* 1/10 */
[class*='col-'][class*='Los-1-10'] {
  margin-left: 10%;
}

[class*='col-'][class*='Ros-1-10'] {
  margin-right: 10%;
}

.no-flexbox [class*='col-1-10'] {
  width: 10%;
}

/* 3/10 */
[class*='col-'][class*='Los-3-10'] {
  margin-left: 30%;
}

[class*='col-'][class*='Ros-3-10'] {
  margin-right: 30%;
}

.no-flexbox [class*='col-3-10'] {
  width: 30%;
}

/* 7/10 */
[class*='col-'][class*='Los-7-10'] {
  margin-left: 70%;
}

[class*='col-'][class*='Ros-7-10'] {
  margin-right: 70%;
}

.no-flexbox [class*='col-7-10'] {
  width: 70%;
}

/* 9/10 */
[class*='col-'][class*='Los-9-10'] {
  margin-left: 90%;
}

[class*='col-'][class*='Ros-9-10'] {
  margin-right: 90%;
}

.no-flexbox [class*='col-9-10'] {
  width: 90%;
}

/* 1/11 */
[class*='col-'][class*='Los-1-11'] {
  margin-left: 9.0909090%;
}

[class*='col-'][class*='Ros-1-11'] {
  margin-right: 9.0909090%;
}

.no-flexbox [class*='col-1-11'] {
  width: 9.0909090%;
}

/* 2/11 */
[class*='col-'][class*='Los-2-11'] {
  margin-left: 18.181818%;
}

[class*='col-'][class*='Ros-2-11'] {
  margin-right: 18.181818%;
}

.no-flexbox [class*='col-2-11'] {
  width: 18.181818%;
}

/* 3/11 */
[class*='col-'][class*='Los-3-11'] {
  margin-left: 27.272727%;
}

[class*='col-'][class*='Ros-3-11'] {
  margin-right: 27.272727%;
}

.no-flexbox [class*='col-3-11'] {
  width: 27.272727%;
}

/* 4/11 */
[class*='col-'][class*='Los-4-11'] {
  margin-left: 36.363636%;
}

[class*='col-'][class*='Ros-4-11'] {
  margin-right: 36.363636%;
}

.no-flexbox [class*='col-4-11'] {
  width: 36.363636%;
}

/* 5/11 */
[class*='col-'][class*='Los-5-11'] {
  margin-left: 45.454545%;
}

[class*='col-'][class*='Ros-5-11'] {
  margin-right: 45.454545%;
}

.no-flexbox [class*='col-5-11'] {
  width: 45.454545%;
}

/* 6/11 */
[class*='col-'][class*='Los-6-11'] {
  margin-left: 54.545454%;
}

[class*='col-'][class*='Ros-6-11'] {
  margin-right: 54.545454%;
}

.no-flexbox [class*='col-6-11'] {
  width: 54.545454%;
}

/* 7/11 */
[class*='col-'][class*='Los-7-11'] {
  margin-left: 63.636363%;
}

[class*='col-'][class*='Ros-7-11'] {
  margin-right: 63.636363%;
}

.no-flexbox [class*='col-7-11'] {
  width: 63.636363%;
}

/* 8/11 */
[class*='col-'][class*='Los-8-11'] {
  margin-left: 72.727272%;
}

[class*='col-'][class*='Ros-8-11'] {
  margin-right: 72.727272%;
}

.no-flexbox [class*='col-8-11'] {
  width: 72.727272%;
}

/* 9/11 */
[class*='col-'][class*='Los-9-11'] {
  margin-left: 81.818181%;
}

[class*='col-'][class*='Ros-9-11'] {
  margin-right: 81.818181%;
}

.no-flexbox [class*='col-9-11'] {
  width: 81.818181%;
}

/* 10/11 */
[class*='col-'][class*='Los-10-11'] {
  margin-left: 90.909090%;
}

[class*='col-'][class*='Ros-10-11'] {
  margin-right: 90.909090%;
}

.no-flexbox [class*='col-10-11'] {
  width: 90.909090%;
}

/* 1/12 */
[class*='col-'][class*='Los-1-12'] {
  margin-left: 8.3333333%;
}

[class*='col-'][class*='Ros-1-12'] {
  margin-right: 8.3333333%;
}

.no-flexbox [class*='col-1-12'] {
  width: 8.3333333%;
}

/* 5/12 */
[class*='col-'][class*='Los-5-12'] {
  margin-left: 41.666666%;
}

[class*='col-'][class*='Ros-5-12'] {
  margin-right: 41.666666%;
}

.no-flexbox [class*='col-5-12'] {
  width: 41.666666%;
}

/* 7/12 */
[class*='col-'][class*='Los-7-12'] {
  margin-left: 58.333333%;
}

[class*='col-'][class*='Ros-7-12'] {
  margin-right: 58.333333%;
}

.no-flexbox [class*='col-7-12'] {
  width: 58.333333%;
}

/* 11/12 */
[class*='col-'][class*='Los-11-12'] {
  margin-left: 91.666666%;
}

[class*='col-'][class*='Ros-11-12'] {
  margin-right: 91.666666%;
}

.no-flexbox [class*='col-11-12'] {
  width: 91.666666%;
}

